<template>
	<cmDialog v-model="dialogState" modal-title="归档" model-width="800px">
		<el-form ref="baseFormRef" :model="baseForm" :rules="props.isView ? {} : rules" label-position="top">
			<el-row :gutter="20" style="margin: 0 !important">
				<el-col :span="12">
					<el-form-item label="归档编号" prop="filingNumber">
						<el-input v-model="baseForm.filingNumber" placeholder="请输入" :disabled="props.isView" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="归档名称" prop="filingName">
						<el-input v-model="baseForm.filingName" placeholder="请输入" :disabled="props.isView" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20" style="margin: 0 !important">
				<el-col :span="24">
					<el-form-item label="主要完成单位(最多可填3家)">
						<div style="width: 100%; display: flex; justify-content: space-between">
							<el-input v-model="baseForm.mainCompletionUnits1" placeholder="请输入" style="width: 30%" maxlength="30" :disabled="props.isView" />
							<el-input v-model="baseForm.mainCompletionUnits2" placeholder="请输入" style="width: 30%" maxlength="30" :disabled="props.isView" />
							<el-input v-model="baseForm.mainCompletionUnits3" placeholder="请输入" style="width: 30%" maxlength="30" :disabled="props.isView" />
						</div>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20" style="margin: 0 !important">
				<el-col :span="24">
					<el-form-item label="主要完成人(最多可填写5人)">
						<div style="width: 100%; display: flex; justify-content: space-between">
							<el-input v-model="baseForm.mainCompletionPersion1" placeholder="请输入" style="width: 18%" maxlength="10" :disabled="props.isView" />
							<el-input v-model="baseForm.mainCompletionPersion2" placeholder="请输入" style="width: 18%" maxlength="10" :disabled="props.isView" />
							<el-input v-model="baseForm.mainCompletionPersion3" placeholder="请输入" style="width: 18%" maxlength="10" :disabled="props.isView" />
							<el-input v-model="baseForm.mainCompletionPersion4" placeholder="请输入" style="width: 18%" maxlength="10" :disabled="props.isView" />
							<el-input v-model="baseForm.mainCompletionPersion5" placeholder="请输入" style="width: 18%" maxlength="10" :disabled="props.isView" />
						</div>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20" style="margin: 0 !important">
				<el-col :span="24">
					<el-form-item label="知识产权">
						<div style="width: 100%; display: flex; justify-content: space-between; margin-bottom: 10px">
							<span style="width: 50px; color: #999">论文</span>
							<el-switch
								v-model="baseForm.isPaper"
								inline-prompt
								:active-icon="Check"
								:inactive-icon="Close"
								:active-value="2"
								:inactive-value="1"
								style="margin-right: 20px"
								:disabled="props.isView"
							/>
							<el-input v-model="baseForm.paperRemark" placeholder="请输入" :disabled="baseForm.isPaper === 1 || props.isView" />
						</div>
						<div style="width: 100%; display: flex; justify-content: space-between; margin-bottom: 10px">
							<span style="width: 50px; color: #999">著作</span>
							<el-switch
								v-model="baseForm.isBook"
								inline-prompt
								:active-icon="Check"
								:inactive-icon="Close"
								:active-value="2"
								:inactive-value="1"
								style="margin-right: 20px"
								:disabled="props.isView"
							/>
							<el-input v-model="baseForm.bookRemark" placeholder="请输入" :disabled="baseForm.isBook === 1 || props.isView" />
						</div>
						<div style="width: 100%; display: flex; justify-content: space-between; margin-bottom: 10px">
							<span style="width: 50px; color: #999">专利</span>
							<el-switch
								v-model="baseForm.isPatent"
								inline-prompt
								:active-icon="Check"
								:inactive-icon="Close"
								:active-value="2"
								:inactive-value="1"
								style="margin-right: 20px"
								:disabled="props.isView"
							/>
							<el-input v-model="baseForm.patentRemark" placeholder="请输入" :disabled="baseForm.isPatent === 1 || props.isView" />
						</div>
						<div style="width: 100%; display: flex; justify-content: space-between; margin-bottom: 10px">
							<span style="width: 50px; color: #999">商标</span>
							<el-switch
								v-model="baseForm.isTrademark"
								inline-prompt
								:active-icon="Check"
								:inactive-icon="Close"
								:active-value="2"
								:inactive-value="1"
								style="margin-right: 20px"
								:disabled="props.isView"
							/>
							<el-input v-model="baseForm.trademarkRemark" placeholder="请输入" :disabled="baseForm.isTrademark === 1 || props.isView" />
						</div>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20" style="margin: 0 !important">
				<el-col :span="24">
					<el-form-item label="摘要" prop="filingAbstract">
						<el-input
							v-model="baseForm.filingAbstract"
							type="textarea"
							placeholder="请输入"
							maxlength="1000"
							show-word-limit
							style="width: 100%"
							:disabled="props.isView"
						/>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20" style="margin: 0 !important">
				<el-col :span="24">
					<el-form-item label="关键词" prop="filingKeywords">
						<el-input-tag v-model="filingKeywords" placeholder="输入一个关键词，按回车键确认" :disabled="props.isView" />
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<div class="dialog-foot">
				<el-button v-if="!props.isAudit && !props.isView && baseForm.processStatus == '1'" type="primary" @click="submitForm(baseFormRef)"
					>提交</el-button
				>
				<el-button v-if="props.isAudit && !props.isView && baseForm.processStatus == '2'" type="primary" @click="submitForm(baseFormRef)"
					>确认成果发布</el-button
				>
				<el-button @click="closeModal">关闭</el-button>
			</div>
		</template>
	</cmDialog>
</template>
<script lang="ts" setup>
import { getDetail, submitAudit } from '@/api/Prospect-project/process-declare'
import cmDialog from '@/components/cm-dialog/index.vue'
import { Check, Close } from '@element-plus/icons-vue'
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
import { computed, reactive, ref, watch } from 'vue'

const props = defineProps({
	modelValue: Boolean,
	editId: {
		type: String,
		default: ''
	},
	isView: Boolean,
	isAudit: {
		type: Boolean,
		default: false
	},
	showAudit: {
		type: Boolean,
		default: false
	}
})

const emit = defineEmits(['update:modelValue', 'submit-success', 'dialog-cancel'])
const dialogState = computed({
	get: () => props.modelValue,
	set: val => emit('update:modelValue', val)
})

const baseFormRef = ref<FormInstance>()
const baseForm = ref({
	filingNumber: '',
	filingName: '',
	isPaper: 1,
	paperRemark: '',
	isBook: 1,
	bookRemark: '',
	isPatent: 1,
	patentRemark: '',
	isTrademark: 1,
	trademarkRemark: '',
	filingKeywords: '',
	filingAbstract: '',
	mainCompletionUnits1: '',
	mainCompletionUnits2: '',
	mainCompletionUnits3: '',
	mainCompletionPersion1: '',
	mainCompletionPersion2: '',
	mainCompletionPersion3: '',
	mainCompletionPersion4: '',
	mainCompletionPersion5: '',
	processStage: '',
	processStatus: ''
})
const rules = reactive({
	filingNumber: [{ required: true, message: '请输入归档编号', trigger: 'blur' }],
	filingName: [{ required: true, message: '请输入归档名称', trigger: 'blur' }]
})
const filingKeywords = ref([])

watch(
	() => dialogState.value,
	val => {
		if (val) {
			getInfo()
		}
	}
)

const getInfo = () => {
	getDetail({
		id: props.editId
	}).then(res => {
		baseForm.value = res.data
		if (res.data.filingKeywords) {
			filingKeywords.value = res.data.filingKeywords.split(',')
		} else {
			filingKeywords.value = []
		}
	})
}

const closeModal = () => {
	emit('update:modelValue', false)
}

const submitForm = async (formEl: FormInstance | undefined) => {
	if (!formEl) {
		return
	}
	await formEl.validate((valid, fields) => {
		if (valid) {
			let form = { ...baseForm.value }
			if (form.isPaper == 2 && form.paperRemark == '') {
				ElMessage.error('请填写论文备注')
				return
			}
			if (form.isBook == 2 && form.bookRemark == '') {
				ElMessage.error('请填写著作备注')
				return
			}
			if (form.isPatent == 2 && form.patentRemark == '') {
				ElMessage.error('请填写专利备注')
				return
			}
			if (form.isTrademark == 2 && form.trademarkRemark == '') {
				ElMessage.error('请填写商标备注')
				return
			}
			form.filingKeywords = filingKeywords.value.join(',')
			// const api = props.isAudit ? submitAudit : updateApi
			submitAudit(form).then(res => {
				ElMessage.success('操作成功！')
				baseFormRef.value?.resetFields()
				emit('submit-success')
			})
		} else {
			if (!fields) {
				return
			}
		}
	})
}
</script>
<style lang="scss" scoped>
.dialog-foot {
	display: flex;
	justify-content: center;
	margin-bottom: 10px;
	padding-bottom: 20px;
}
</style>
